<template>
	<view style="padding-bottom: 80rpx;">
		<!-- 顶部导航栏 -->
		<u-navbar :safeAreaInsetTop="false" title="商品" :fixed="true" rightIcon="more-circle"
			@leftClick="handleLeftClick">
		</u-navbar>
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper :list="swiper_list" indicator indicatorMode="line" circular height="400"></u-swiper>
		</view>

		<!-- 商品详情 -->
		<view class="detail">
			<view class="cost">
				<view class="price">
					￥<text>{{goodsDetail.price}}</text>起
					<template v-if="goodsDetail.vip_price !==0">
						<view class="vip-price">￥{{goodsDetail.vip_price}}</view>
						<image src="../../static/img/goods-detail/svip.gif" mode=""></image>
					</template>
				</view>
				<u-icon name="share-square" size="50rpx"></u-icon>
			</view>
			<view class="title">{{goodsDetail.store_name}}</view>
			<template v-if="goodsDetail.limit_num!==0">
				<view class="limit">永久限购{{goodsDetail.limit_num}}个</view>
			</template>
			<view class="particulars">
				<view class="ot_price">划线价：￥{{goodsDetail.ot_price}}</view>
				<view class="inventory">库存：{{goodsDetail.stock}}个</view>
				<view class="sales">销量：{{goodsDetail.fsales}}个</view>
			</view>
			<view class="coupons">
				<u-cell class="u-cell" :isLink="true" :border="false">
					<view slot="title" class="coupons-title">
						<text style="font-size: 28rpx;color: #82848f;">优惠券：</text>
						<view class="coupons-type">满 500 减 100</view>
						<view class="coupons-type">满 100 减 7</view>
					</view>
				</u-cell>
			</view>
		</view>

		<!-- 商品规格 -->
		<view class="specs" @click="specs_show=true">
			<u-cell :isLink="true" :border="false">
				<view slot="title" class="specs-title">
					<text style="font-size: 28rpx;color: #82848f;">已选择：</text>
					<view class="specs-detail">
						<view class="specs-name">{{current_select}}</view>
						<view class="specs-img">
							<image v-for="item in productValue.slice(0,4)" :key="item.id" :src="item.image" mode=""
								style="width: 50rpx; height: 50rpx;"></image>
							<view class="img-tips">共{{current_num}}中规格可选</view>
						</view>
					</view>
				</view>
			</u-cell>
		</view>

		<!-- 规格弹出层 -->
		<u-popup class="popup" :show="specs_show" :closeable="true" :round="10" mode="bottom" zIndex="10"
			@close="handlePopUpClose">
			<view class="specs-select">
				<view class="goods-detail">
					<view class="goods-img">
						<image :src="goodsDetail.image" mode=""></image>
					</view>
					<view class="goods-text">
						<view class="goods-title">{{goodsDetail.store_name}}</view>
						<view class="goods-price">
							<text class="price">￥{{goodsDetail.price}}</text>
							<template v-if="goodsDetail.vip_price !==0">
								<view class="vip-price">￥{{goodsDetail.vip_price}}</view>
								<image src="../../static/img/goods-detail/svip.gif" mode=""></image>
							</template>
						</view>
						<view class="goods-stock">
							<view class="stock">库存：{{goodsDetail.stock}}</view>
							<view class="limit" v-if="goodsDetail.limit_num">限购：{{goodsDetail.limit_num}}个</view>
						</view>
					</view>
				</view>
				<view class="selected">
					<view v-for="item in productAttr" :key="item.id">
						<text class="select-title">{{item.attr_name}}</text>
						<view class="select-type">
							<view class="select-item" :class="obj.check ? 'selected-item':''"
								v-for="(obj,index) in item.attr_value" :key="index"
								@click="handleSelectSpecs(item.attr_value,index)">
								{{obj.attr}}
							</view>
						</view>
					</view>
					<view class="goods-num">
						<text class="num">数量：</text>
						<view class="number-box">
							<u-number-box v-if="goodsDetail.limit_num" v-model="cartNum"
								:max="goodsDetail.limit_num"></u-number-box>
							<u-number-box v-else v-model="cartNum"></u-number-box>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 用户评价 -->
		<view class="appraise" v-if="reply">
			<u-cell :isLink="true" :border="true">
				<view slot="title" class="title">
					<view>用户评价({{goodsData.replyCount}})</view>
					<view>
						<text style="color: #e93323;">{{goodsData.replyChance}}%</text>
						<text>好评率</text>
					</view>
				</view>
			</u-cell>
			<view class="content">
				<view class="content-top">
					<image class="avatar" :src="reply.avatar" mode=""></image>
					<view class="nickname">{{reply.nickname}}</view>
					<u-rate count="5" v-model="reply.star" activeColor="#ffa508"></u-rate>
				</view>
				<view class="add_time">{{reply.add_time}}</view>
				<view class="comment">{{reply.comment}}</view>
				<img class="pics" v-for="(item,index) in reply.pics" :key="index" :src="item" alt="">
				<view class="reply-content" v-if="reply.is_reply">
					<text style="color: #e93323;">店小二：</text>
					<text>{{reply.merchant_reply_content}}</text>
				</view>
			</view>
		</view>

		<!-- 优品推荐 -->
		<view class="recommend">
			<view class="title">
				<view class="outer">
					<view class="inner"></view>
				</view>
				<text class="name">优品推荐</text>
				<view class="outer">
					<view class="inner"></view>
				</view>
			</view>
			<u-scroll-list indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
				<view class="u-scroll" v-for="(item, index) in goodsData.good_list" :key="item.id"
					@click="handleCheckDetail(item.id)">
					<image style="width: 220rpx;height: 220rpx;" :src="item.image"></image>
					<view class="goods-name">{{item.store_name}}</view>
					<view class="goods-price">￥{{item.price}}</view>
				</view>
			</u-scroll-list>
		</view>

		<!--产品介绍 -->
		<view class="introduce">
			<view class="title">产品介绍</view>
			<view v-html="goodsDetail.description"></view>
		</view>

		<!-- 底部导航栏 -->
		<view class="tabbar">
			<view class="home">
				<navigator url="/pages/index/index" open-type="switchTab" hover-class="other-navigator-hover">
					<u-icon name="home" size="52rpx"></u-icon>
					<view class="">首页</view>
				</navigator>
			</view>
			<view class="heart" @click="handleCollection" v-show="!userCollect">
				<u-icon name="heart" size="52rpx"></u-icon>
				<view class="">收藏</view>
			</view>
			<view class="heart" @click="handleCancelCollect" v-show="userCollect">
				<u-icon name="heart-fill" color="#e93323" size="52rpx"></u-icon>
				<view class="">收藏</view>
			</view>
			<view class="shopping-cart">
				<navigator url="/pages/cart/cart" open-type="switchTab" hover-class="other-navigator-hover">
					<u-icon name="shopping-cart" size="60rpx"></u-icon>
					<view class="">购物车</view>
				</navigator>
			</view>
			<view class="option">
				<view class="join-cart" @click="handleAddCart">加入购物车</view>
				<view class="buy-now" v-if="goodsDetail.stock" @click="handleBuyNow">立即购买</view>
				<view class="sellout" v-else>已售罄</view>
			</view>
		</view>

	</view>
</template>

<script>
	import { cart, product } from '../../api';
	import { user } from '../../api';
	export default {
		onLoad() {
			let id = uni.getStorageSync("goods_id");
			this.getGoodsDetail(id);
		},
		data() {
			return {
				goodsData: {},
				swiper_list: [],
				goodsDetail: {},
				productAttr: [],
				productValue: [],
				current_num: 0,
				specs_show: false,
				current_select: '',
				reply: {},
				cartNum: 1,
				userCollect: false,
				add_cart: {
					productId: '',
					cartNum: 1,
					uniqueId: '',
					new: 0,
				}
			}
		},
		methods: {
			async getGoodsDetail(id) {
				let { status, msg, data } = await product.goods_detail(id);
				if (status === 200) {
					this.goodsData = data;
					this.swiper_list = data.storeInfo.slider_image;
					this.goodsDetail = data.storeInfo;
					this.productAttr = data.productAttr;
					this.productValue = Object.values(data.productValue);
					this.current_num = this.productValue.length;
					this.reply = data.reply;
					this.userCollect = data.storeInfo.userCollect;
					// 每一项默认选择第一个
					let arr = [];
					this.productAttr.forEach(item => {
						item.attr_value[0].check = true;
						arr.push(item.attr_value.find(obj => obj.check === true));
					});
					this.current_select = arr.map(item => item.attr).toString();
				}
			},
			handleLeftClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			handlePopUpClose() {
				this.specs_show = false;
				// “已选择”部分的替换
				let arr = [];
				this.productAttr.forEach(item => {
					arr.push(item.attr_value.find(obj => obj.check === true));
				})
				this.current_select = arr.map(item => item.attr).toString();
			},
			handleSelectSpecs(item, i) {
				let arr = [];
				item.forEach(items => {
					if (item.indexOf(items) === i) {
						items.check = true;
						this.productAttr.forEach(item => {
							arr.push(item.attr_value.find(obj => obj.check === true));
						})
						this.current_select = arr.map(item => item.attr).toString();
					} else {
						items.check = false;
					}
				})
			},
			// 添加收藏
			async handleCollection() {
				let token = uni.getStorageSync('token');
				if (token) {
					let id = uni.getStorageSync('goods_id');
					let { status, msg } = await user.add_collect({ id });
					if (status === 200) {
						// 修改图片颜色
						this.userCollect = true;
						uni.showToast({
							title: msg,
							duration: 2000,
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: msg,
							duration: 2000,
							icon: 'error'
						})
					}
				} else {
					// 获取当前页面地址
					let routes = getCurrentPages();
					let curRoute = '/' + routes[routes.length - 1].route
					uni.setStorageSync("URL", curRoute)
					uni.navigateTo({
						url: "/pages/login/login",
					});
				}
			},
			// 取消收藏
			async handleCancelCollect() {
				let id = uni.getStorageSync('goods_id');
				let { status, msg } = await user.del_collect({ id });
				if (status === 200) {
					// 修改图片颜色
					this.userCollect = false;
					uni.showToast({
						title: msg,
						duration: 2000,
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: msg,
						duration: 2000,
						icon: 'error'
					})
				}
			},
			// 加入购物车
			async handleAddCart() {
				if (this.specs_show) {
					let obj = this.productValue.find(item => item.suk === this.current_select);
					this.add_cart.productId = obj.product_id;
					this.add_cart.uniqueId = obj.unique;
					this.add_cart.cartNum = this.cartNum;
					let { status, msg, data } = await cart.cart_add(this.add_cart);
					if (status === 200) {
						this.specs_show = false;
						uni.showToast({
							title: msg,
							duration: 2000,
							icon: 'success'
						})
					} else {
						this.specs_show = false;
						uni.showToast({
							title: msg,
							duration: 2000,
							icon: 'error'
						})
					}
				} else {
					this.specs_show = true;
				}
			},
			// 查看优品推荐
			handleCheckDetail(id) {
				uni.setStorageSync("goods_id", id);
				uni.navigateTo({
					url: '/pages/goods_detail/goods_detail',
				})
			},
			// 立即购买
			async handleBuyNow() {
				if (this.specs_show) {
					let obj = this.productValue.find(item => item.suk === this.current_select);
					this.add_cart.productId = obj.product_id;
					this.add_cart.uniqueId = obj.unique;
					this.add_cart.cartNum = this.cartNum;
					this.add_cart.new = 1;
					let { status, msg, data } = await cart.cart_add(this.add_cart);
					if (status === 200) {
						this.specs_show = false;
						uni.setStorageSync("new", 1);
						uni.navigateTo({
							url: `/pages/order/confirmOrder?cartId=${data.cartId}`,
						})
					} else {
						this.specs_show = false;
						uni.showToast({
							title: msg,
							duration: 2000,
							icon: 'error'
						})
					}
				} else {
					this.specs_show = true;
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #eee;
	}

	.swiper {
		width: 100%;
		height: 750rpx;
		background-color: #fff;
	}

	.detail {
		background-color: #fff;
		padding: 10rpx 20rpx;

		.cost {
			display: flex;
			justify-content: space-between;
			align-items: center;


			.price {
				color: #e93323;
				font-weight: bold;
				display: flex;
				align-items: center;

				.vip-price {
					color: #000;
					margin-left: 10rpx;
				}

				image {
					width: 60rpx;
					height: 28rpx;
				}

				text {
					font-size: 50rpx;
				}
			}
		}

		.title {
			font-size: 33rpx;
			margin-top: 20rpx;
			font-weight: bold;
		}

		.limit {
			font-size: 16rpx;
			color: red;
			margin-top: 10rpx;
		}

		.particulars {
			display: flex;
			justify-content: space-between;
			margin: 32rpx 0;
			font-size: 26rpx;
			color: #82848f;
			margin-top: 24rpx;
		}

		.coupons {

			.u-cell {

				/deep/ .u-cell__body {
					padding: 20rpx 0rpx !important;
				}
			}

			.coupons-title {
				display: flex;
				justify-content: flex-start;

				.coupons-type {
					height: 22px;
					padding: 0 11px;
					border: 0.5px solid #e9332380;
					color: #e93323;
					font-size: 13px;
					line-height: 22px;
					position: relative;
					margin-right: 20rpx;

					&::before {
						content: " ";
						position: absolute;
						width: 3px;
						height: 5px;
						border-radius: 0 3px 3px 0;
						border: 0.5px solid #e9332380;
						background-color: #fff;
						bottom: 50%;
						left: -1px;
						margin-bottom: -3px;
						border-left-color: #fff;
					}

					&::after {
						content: " ";
						position: absolute;
						width: 3px;
						height: 5px;
						border-radius: 3px 0 0 3px;
						border: 0.5px solid #e9332380;
						background-color: #fff;
						right: -1px;
						bottom: 50%;
						margin-bottom: -3px;
						border-right-color: #fff;
					}
				}
			}
		}
	}

	// 商品规格
	.specs {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 10rpx 20rpx;

		.u-cell {

			/deep/ .u-cell__body {
				padding: 5rpx 0rpx !important;
			}
		}

		.specs-title {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;

			.specs-detail {
				.specs-name {
					margin-bottom: 20rpx;
				}

				.specs-img {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						margin-right: 15rpx;
					}

					.img-tips {
						height: 60rpx;
						line-height: 60rpx;
						box-sizing: border-box;
						background: #eee;
						padding: 0 10rpx;
						border-radius: 8rpx;
						text-align: center;
						color: #82848f;
					}
				}
			}
		}

	}

	// 规格弹出层
	.popup {

		/deep/ .u-transition {
			z-index: 10 !important;
		}

		.specs-select {
			padding: 30rpx;
			padding-bottom: 120rpx;

			.goods-detail {
				display: flex;

				.goods-img {

					image {
						width: 160rpx;
						height: 160rpx;
						margin-right: 30rpx
					}
				}

				.goods-text {
					width: 400rpx;

					.goods-title {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.goods-price {
						display: flex;
						justify-content: flex-start;
						align-items: flex-end;
						margin-top: 44rpx;

						.price {
							color: #e93323;
							font-size: 35rpx;
							margin-right: 25rpx;
						}

						.vip-price {
							font-weight: bold;
							margin-right: 10rpx;
						}

						image {
							width: 75rpx;
							height: 28rpx;
						}
					}

					.goods-stock {
						display: flex;
						font-size: 26rpx;
						color: #999;

						.stock {
							margin-right: 20rpx;
						}
					}

				}
			}

			.selected {

				.select-title {
					font-size: 32rpx;
					color: #999;
				}

				.select-type {
					display: flex;
					flex-wrap: wrap;

					.select-item {
						margin: 20rpx 20rpx 20rpx 0rpx;
						border: 3rpx solid #f2f2f2;
						font-size: 28rpx;
						color: #282828;
						padding: 6rpx 36rpx;
						border-radius: 26rpx;
						background-color: #f2f2f2
					}

					// 选中状态
					.selected-item {
						margin: 20rpx 20rpx 20rpx 0rpx;
						border: 3rpx solid #f2f2f2;
						font-size: 28rpx;
						color: #e93323;
						background-color: rgba(233, 51, 5, 0.1);
						padding: 6rpx 36rpx;
						border-radius: 26rpx;
					}
				}

				.goods-num {

					.num {
						font-size: 32rpx;
						color: #999;
					}

					.number-box {
						display: flex;
						justify-content: flex-end;
						padding-right: 15rpx;
					}
				}
			}
		}
	}

	// 用户评价
	.appraise {
		margin: 20rpx 0rpx;
		background-color: #fff;


		.title {
			display: flex;
			justify-content: space-between;
		}

		.content {
			padding: 10rpx 32rpx;

			.content-top {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.avatar {
					width: 60rpx;
					height: 60rpx;
					margin-right: 22rpx;
				}

				.nickname {
					margin-right: 22rpx;
				}
			}

			.add_time {
				font-size: 13px;
				color: #82848f;
				margin: 15rpx 0rpx;
			}

			.pics {
				width: 160rpx;
				height: 160rpx;
			}

			.reply-content {
				font-size: 14px;
				color: #454545;
				background-color: #f7f7f7;
				border-radius: 2px;
				padding: 11px;
			}
		}
	}

	// 优品推荐
	.recommend {
		width: 100%;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			.outer {
				position: relative;
				width: 24rpx;
				height: 24rpx;
				background-color: #e933231a;
				transform: rotate(45deg);

				.inner {
					width: 12rpx;
					height: 12rpx;
					background-color: #e93323;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.name {
				font-size: 32rpx;
				color: #e93323;
				padding: 20rpx 40rpx;
			}
		}

		.u-scroll {
			margin: 20rpx 50rpx;

			.goods-name {
				width: 220rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #282828;
				margin-top: 12rpx;
			}

			.goods-price {
				color: #e93323;
				margin-top: 10rpx;
			}
		}

	}

	// 产品介绍
	.introduce {
		width: 100%;
		margin-top: 20rpx;
		background-color: #fff;
		text-align: center;

		.title {
			padding: 20rpx;
		}
	}

	// 底部导航
	.tabbar {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 3rpx solid #eee;
		background-color: rgba(255, 255, 255, 0.85);
		font-size: 20rpx;
		z-index: 100;

		.home {
			text-align: center;

			.u-icon {
				display: flex;
				justify-content: center;
			}
		}

		.option {
			display: flex;
			justify-content: center;

			.join-cart,
			.buy-now {
				width: 180rpx;
			}



			.join-cart {
				width: 200rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 30rpx;
				border-radius: 50rpx 0 0 50rpx;
				background-color: #fe960f;
			}

			.buy-now {
				width: 200rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 30rpx;
				border-radius: 0 50rpx 50rpx 0;
				background-color: #e93323;
			}

			.sellout {
				width: 200rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 30rpx;
				border-radius: 0 50rpx 50rpx 0;
				background-color: #bbb;
			}
		}
	}
</style>